﻿@*
    新增供应商页面
*@
@{
    ViewData["Title"] = "新增供应商";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新增供应商</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>
        body {
            background-color: #f2f2f2;
            padding: 10px;
        }

        .layui-card {
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            max-width: 900px;
            margin: 0 auto;
        }

        .layui-card-header {
            font-size: 15px;
            font-weight: bold;
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
        }

        .form-container {
            padding: 15px 10px 0 10px;
        }

        .layui-form-item .required:before {
            content: '*';
            color: #FF5722;
            margin-right: 3px;
        }

        .layui-input, .layui-textarea {
            border-radius: 2px;
            height: 32px;
            line-height: 32px;
        }

        .layui-btn {
            border-radius: 2px;
            height: 32px;
            line-height: 32px;
            padding: 0 15px;
        }

        .layui-form-label {
            padding: 6px 10px;
            width: 80px;
        }
        
        .layui-input-block {
            margin-left: 110px;
        }

        .form-action-buttons {
            margin-top: 20px;
            text-align: center;
        }

        .form-item-title {
            border-left: 3px solid #009688;
            padding-left: 8px;
            margin: 15px 0 10px 0;
            font-weight: bold;
            font-size: 14px;
        }

        .layui-block {
            width: 100% !important;
        }

        .layui-input-inline {
            width: 220px !important;
        }

        .layui-textarea {
            min-height: 60px;
        }

        .tip-text {
            color: #999;
            font-size: 12px;
            margin-top: 3px;
        }
        
        .layui-form-item {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-add-1"></i> 新增供应商
            </div>
            <div class="layui-card-body">
                <div class="form-container">
                    <form class="layui-form" lay-filter="supplierForm">
                        <div class="form-item-title">基本信息</div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label required">供应商编码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="supplierCodeInput" name="supplierCode" required lay-verify="required"
                                           placeholder="请输入供应商编码" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">
                                    <input type="checkbox" name="autoGenerate" lay-skin="switch" lay-text="自动生成|手动输入" lay-filter="autoGenerateSwitch">
                                    <div class="tip-text">编码为唯一标识，添加后不可修改</div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label required">供应商名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supplierName" required lay-verify="required"
                                           placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商等级</label>
                                <div class="layui-input-inline">
                                    <select name="supplierGrade">
                                        <option value="">请选择等级</option>
                                        <option value="A">A级 - 战略供应商</option>
                                        <option value="B">B级 - 优质供应商</option>
                                        <option value="C">C级 - 合格供应商</option>
                                        <option value="D">D级 - 试用供应商</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商评分</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="supplierScore" placeholder="请输入供应商评分"
                                           autocomplete="off" class="layui-input" min="0" max="100">
                                </div>
                                <div class="layui-form-mid tip-text">0-100</div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">是否启用</label>
                                <div class="layui-input-inline" style="width: 150px !important;">
                                    <input type="radio" name="isNo" value="1" title="启用" checked>
                                    <input type="radio" name="isNo" value="0" title="禁用">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">联系电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supplierPhone" placeholder="请输入联系电话"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-item-title">联系信息</div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">联系人</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="contactPerson" placeholder="请输入联系人"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="form-item-title">补充信息</div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商地址</label>
                            <div class="layui-input-block" style="width: calc(100% - 95px);">
                                <textarea name="supplierAdress" placeholder="请输入供应商地址" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">备注信息</label>
                            <div class="layui-input-block" style="width: calc(100% - 95px);">
                                <textarea name="context" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item form-action-buttons">
                            <button class="layui-btn" lay-submit lay-filter="formSubmit">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="backBtn">返回列表</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function() {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 初始化表单
            form.render();
            
            // 自动生成编码开关事件
            form.on('switch(autoGenerateSwitch)', function(data){
                var $codeInput = $('#supplierCodeInput');

                if(data.elem.checked){
                    // 显示加载层
                    var loadIndex = layer.load(1, { shade: [0.1, '#fff'] });

                    // 禁用输入框
                    $codeInput.attr('disabled', true);

                    // 调用后端接口获取自动生成的编码
                    $.ajax({
                        url: '/Supplier/GenerateSupplierCode',
                        type: 'GET',
                        success: function(res){
                            layer.close(loadIndex);
                            if(res.code === 0){
                                // 填充自动生成的编码
                                $codeInput.val(res.data);
                            } else {
                                layer.msg(res.msg || '编码生成失败', {icon: 2});
                                // 恢复输入框状态
                                $codeInput.removeAttr('disabled');
                                // 切回开关状态
                                data.elem.checked = false;
                                form.render('checkbox');
                            }
                        },
                        error: function(){
                            layer.close(loadIndex);
                            layer.msg('服务器错误，编码生成失败', {icon: 2});
                            // 恢复输入框状态
                            $codeInput.removeAttr('disabled');
                            // 切回开关状态
                            data.elem.checked = false;
                            form.render('checkbox');
                        }
                    });
                } else {
                    // 启用输入框
                    $codeInput.removeAttr('disabled').val('').focus();
                }
            });

            // 表单提交事件
            form.on('submit(formSubmit)', function(data) {
                // 显示加载层
                var loadIndex = layer.load(1, { shade: [0.1, '#fff'] });
                
                // 验证供应商编码
                var supplierCode = $('#supplierCodeInput').val();
                if (!supplierCode) {
                    layer.close(loadIndex);
                    layer.msg('请输入或生成供应商编码', {icon: 2});
                    return false;
                }

                // 构造提交数据
                var formData = {
                    SupplierCode: supplierCode,
                    SupplierName: $('input[name="supplierName"]').val(),
                    SupplierGrade: $('select[name="supplierGrade"]').val(),
                    SupplierScore: parseInt($('input[name="supplierScore"]').val()) || 0,
                    IsNo: parseInt($('input[name="isNo"]:checked').val()) || 0,
                    SupplierPhone: $('input[name="supplierPhone"]').val(),
                    ContactPerson: $('input[name="contactPerson"]').val(),
                    SupplierAdress: $('textarea[name="supplierAdress"]').val(),
                    Context: $('textarea[name="context"]').val()
                };
                
                console.log("提交的表单数据:", formData);

                // 发送保存请求
                $.ajax({
                    url: '/Supplier/AddSupplier',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(res) {
                        layer.close(loadIndex);
                        if(res.code === 0) {
                            layer.msg('添加成功', {
                                icon: 1,
                                time: 1000
                            }, function(){
                                // 添加成功后返回列表页
                                window.location.href = '/Supplier/Index';
                            });
                        } else {
                            layer.msg(res.msg || '添加失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.close(loadIndex);
                        layer.msg('服务器错误，添加失败', {icon: 2});
                    }
                });

                return false; // 阻止表单跳转
            });

            // 返回按钮点击事件
            $('#backBtn').on('click', function() {
                window.location.href = '/Supplier/Index';
                return false;
            });
        });
    </script>
</body>
</html> 